
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>冬季运动会图片</title>

<link rel="stylesheet" type="text/css" href="dist/css/lightgallery.min.css">
<style>
	body{
		background-color: #152836
	}
	.demo-gallery > ul {
		margin-bottom: 0;
	}
	.demo-gallery > ul > li {
		float: left;
		margin-bottom: 15px;
		margin-right: 20px;
		/* width: 200px; */
		/* height: 160px; */
	}
	.demo-gallery > ul > li a {
		border: 3px solid #FFF;
		border-radius: 3px;
		display: block;
		overflow: hidden;
		position: relative;
		float: left;
	}
	.demo-gallery > ul > li a > img {
		-webkit-transition: -webkit-transform 0.15s ease 0s;
		-moz-transition: -moz-transform 0.15s ease 0s;
		-o-transition: -o-transform 0.15s ease 0s;
		transition: transform 0.15s ease 0s;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		height: 160px;
		/* height: 100%;
		width: 100%; */
	}
	.demo-gallery > ul > li a:hover > img {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}
	.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
		opacity: 1;
	}
	.demo-gallery > ul > li a .demo-gallery-poster {
		background-color: rgba(0, 0, 0, 0.1);
		bottom: 0;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		-webkit-transition: background-color 0.15s ease 0s;
		-o-transition: background-color 0.15s ease 0s;
		transition: background-color 0.15s ease 0s;
	}
	.demo-gallery > ul > li a .demo-gallery-poster > img {
		left: 50%;
		margin-left: -10px;
		margin-top: -10px;
		opacity: 0;
		position: absolute;
		top: 50%;
		-webkit-transition: opacity 0.3s ease 0s;
		-o-transition: opacity 0.3s ease 0s;
		transition: opacity 0.3s ease 0s;
	}
	.demo-gallery > ul > li a:hover .demo-gallery-poster {
		background-color: rgba(0, 0, 0, 0.5);
	}
	.demo-gallery .justified-gallery > a > img {
		-webkit-transition: -webkit-transform 0.15s ease 0s;
		-moz-transition: -moz-transform 0.15s ease 0s;
		-o-transition: -o-transform 0.15s ease 0s;
		transition: transform 0.15s ease 0s;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		height: 100%;
		width: 100%;
	}
	.demo-gallery .justified-gallery > a:hover > img {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}
	.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
		opacity: 1;
	}
	.demo-gallery .justified-gallery > a .demo-gallery-poster {
		background-color: rgba(0, 0, 0, 0.1);
		bottom: 0;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		-webkit-transition: background-color 0.15s ease 0s;
		-o-transition: background-color 0.15s ease 0s;
		transition: background-color 0.15s ease 0s;
	}
	.demo-gallery .justified-gallery > a .demo-gallery-poster > img {
		left: 50%;
		margin-left: -10px;
		margin-top: -10px;
		opacity: 0;
		position: absolute;
		top: 50%;
		-webkit-transition: opacity 0.3s ease 0s;
		-o-transition: opacity 0.3s ease 0s;
		transition: opacity 0.3s ease 0s;
	}
	.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
		background-color: rgba(0, 0, 0, 0.5);
	}
	.demo-gallery .video .demo-gallery-poster img {
		height: 48px;
		margin-left: -24px;
		margin-top: -24px;
		opacity: 0.8;
		width: 48px;
	}
	.demo-gallery.dark > ul > li a {
		border: 3px solid #04070a;
	}
	.home .demo-gallery {
		padding-bottom: 80px;
	}
</style>

</head>
<body class="home">
<div class="demo-gallery">
	<ul id="lightgallery" class="list-unstyled row">

	</ul>
</div>

<script src="js/picturefill.min.js"></script>
<script src="dist/js/lightgallery.js"></script>
<script src="js/lg-pager.js"></script>
<script src="js/lg-autoplay.js"></script>
<script src="js/lg-fullscreen.js"></script>
<script src="js/lg-zoom.js"></script>
<script src="js/lg-share.js"></script>
<script src="//cdn.staticfile.org/layui/2.6.8/layui.js"></script>
<script>
var protocol0 = window.location.protocol;
protocol0 = 'https:';
var protocol = 'http:';
var domain = {
	'api': protocol0 + '//i.fe80.cn', //应用域名
	'upyun': protocol0 + '//cdn.fe80.cn', //又拍云CDN地址
	'aliyun': protocol + '//oss.i.fe80.cn', //阿里云CDN地址
	'tencent': protocol + '//cos.xinxiaoyi.cn', //腾讯云CDN地址
};
var path = '/uploads/dunz/';
var filedomain = domain.upyun;
var api = domain.api + '/tools/sdk/upyun.html';
var push = {method:'read',read:path};

layui.use(['form'],function(){
    var $ = layui.$;
	var load = layer.load();
    $.post(api,push,function(res){
        console.log(res);
		layer.close(load);
        renderList(res.read.files,push.read);
    });
});

function renderList(il,path = ''){
    var d = document.getElementById('lightgallery');
    var _html = '';
    for (var i = 0; i < il.length; i++) {
        if(il[i].type == 'N'){
			_html += '<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="" data-src="'+ filedomain + path + il[i].name +'" '+
			// _html += '<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="'+ filedomain + path + il[i].name +'" '+
			'data-sub-html="<h4>Fading Light</h4><p>' + il[i].name + '</p>" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">'+
			'<a href="">'+
			'<img class="img-responsive" src="'+ filedomain + path + il[i].name +'" alt="Thumb-1">'+
			'</a>'+
			'</li>';
        }
    }
    d.innerHTML = _html;
	lightGallery(document.getElementById('lightgallery'));
}

</script>
<div style="text-align:center;clear:both;margin-top:150px">
</div>
</body>
</html>